{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'css/horizontal_filter.css' %}">

<div class="horizontal-filter-widget row">
    <div class="filter-column available col-auto ">

        <label>可用原料</label>
        <!-- 添加搜索框 -->
        <input type="text" class="form-control filter-search" placeholder="搜索..."
               data-target="id_{{ widget.name }}_available">
        <select id="id_{{ widget.name }}_available" multiple size="10" class="form-select">
            {% for obj in unselected_options %}
            <option value="{{ obj.id }}">{{ obj.name }}</option>
            {% endfor %}
        </select>
    </div>

    <div class="filter-controls col-auto ">
        <button type="button" class="move-right">&gt;</button>
        <button type="button" class="move-all-right">&gt;&gt;</button>
        <br>
        <button type="button" class="move-left">&lt;</button>
        <button type="button" class="move-all-left">&lt;&lt;</button>
    </div>

    <div class="filter-column selected col-auto">
        <label>已选原料</label>
        <!-- 添加搜索框 -->
        <input type="text" class="form-control filter-search" placeholder="搜索..."
               data-target="id_{{ widget.name }}_selected">
        <select id="id_{{ widget.name }}_selected" multiple size="10" class="form-select">
            {% for obj in selected_options %}
            <option value="{{ obj.id }}">{{ obj.name }}</option>
            {% endfor %}
        </select>
    </div>

    <!-- 这是一个隐藏的 select，用于存储最终选中的值并提交给服务器 -->
    <select name="{{ widget.name }}" id="{{ hidden_select_id }}" multiple hidden>
        {% for obj in selected_options %}
        <option value="{{ obj.id }}" selected>{{ obj.name }}</option>
        {% endfor %}
    </select>
</div>


<script type="text/javascript">
    function initHorizontalFilter(availableSelectId, selectedSelectId, hiddenSelectId) {

    const availableSelect = document.getElementById(availableSelectId);
    const selectedSelect = document.getElementById(selectedSelectId);
    const hiddenSelect = document.getElementById(hiddenSelectId);
       // --- 新增：搜索功能 ---
    function filterOptions(searchInput) {
        const filter = searchInput.value.toUpperCase();
        const targetSelectId = searchInput.getAttribute('data-target');
        const targetSelect = document.getElementById(targetSelectId);

        // 遍历所有选项
        for (let i = 0; i < targetSelect.options.length; i++) {
            const txtValue = targetSelect.options[i].textContent || targetSelect.options[i].innerText;
            // 如果找到匹配项，显示选项，否则隐藏
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                targetSelect.options[i].style.display = "";
            } else {
                targetSelect.options[i].style.display = "none";
            }
        }
    }

    // 为所有搜索框添加输入事件监听器
    document.querySelectorAll('.filter-search').forEach(input => {
        input.addEventListener('input', function() {
            filterOptions(this);
        });
    });
    // --- 搜索功能结束 ---
    // 从一个 select 移动选项到另一个 select
    function moveOptions(source, target, moveAll) {

        let options = moveAll ? Array.from(source.options) : Array.from(source.selectedOptions);

        options.forEach(option => {
            target.appendChild(option);
        });

        // 更新隐藏的 select
        updateHiddenSelect();
    }

    // 更新隐藏的 select 以反映当前选中的选项
    function updateHiddenSelect() {
        // 清空所有选项
        hiddenSelect.innerHTML = '';

        // 将 selectedSelect 中的所有选项复制到 hiddenSelect
        Array.from(selectedSelect.options).forEach(option => {
            const newOption = document.createElement('option');
            newOption.value = option.value;
            newOption.textContent = option.textContent;
            newOption.selected = true;
            hiddenSelect.appendChild(newOption);
        });
    }

    // 为按钮添加事件监听器
    document.querySelector('.move-right').addEventListener('click', () => {
        moveOptions(availableSelect, selectedSelect, false);
    });

    document.querySelector('.move-all-right').addEventListener('click', () => {
        moveOptions(availableSelect, selectedSelect, true);
    });

    document.querySelector('.move-left').addEventListener('click', () => {
        moveOptions(selectedSelect, availableSelect, false);
    });

    document.querySelector('.move-all-left').addEventListener('click', () => {
        moveOptions(selectedSelect, availableSelect, true);
    });
}
</script>
<script>
    // 初始化这个 widget 的 JavaScript
    document.addEventListener('DOMContentLoaded', function() {
        initHorizontalFilter(
            'id_{{ widget.name }}_available',
            'id_{{ widget.name }}_selected',
            '{{ hidden_select_id }}'
        );
    });
</script>